<template>

    <el-form
            label-width="110px"
            label-position="right"
            :inline="true"
    >

        <el-row>

            <el-col :span="8">
                <el-form-item label="流程编号：">
                    {{ detailData.processNo }}
                </el-form-item>
            </el-col>

            <el-col :span="8">
                <el-form-item label="创建时间：">
                    {{ dateFormat('yyyy-mm-dd HH:MM',detailData.startTime) }}
                </el-form-item>
            </el-col>

            <el-col :span="8">
                <el-form-item label="创建人：">
                    {{ detailData.initiator }}
                </el-form-item>
            </el-col>

        </el-row>

    </el-form>

    <item-title title="基本信息" />

    <div>

        <el-form label-width="110px" label-position="right" size="small">
            <el-row gutter="40">
                <el-col :span="12">
                    <el-form-item label="终端名称：">
                        {{old.terminalName}}
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="所在地区：" prop="region">
                        {{ old.provinceName }}/{{ old.cityName }}/{{ old.areaName }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="终端类型：" prop="terminalType">
                        {{ getLabel('app_mode', old.terminalType) }}
                    </el-form-item>
                </el-col>

                <el-col :span="24">
                    <el-form-item label="产品信息：">
                        {{getProductName(old)}}
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="终端价：" prop="productPopularName">
                        <div :class=" old.productPriceId != datas.productPriceId ? 'flow-status-color' : ''">
                            {{old.terminalPrice}}元
                            <span v-if="old.sellUnit">/{{ getLabel("sell_unit", old.sellUnit) }}</span>

                            <template v-if="old.productPriceId != datas.productPriceId">
                                --> {{datas.newTerminalPrice}}元
                                <span v-if="old.sellUnit">/{{ getLabel("sell_unit", old.sellUnit) }}</span>
                            </template>
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="交易价：" prop="packSpecs">
                        <div :class=" old.tradePrice != datas.newTradePrice ? 'flow-status-color' : ''">
                            {{old.tradePrice}}元
                            <span v-if="old.sellUnit">/{{ getLabel("sell_unit", old.sellUnit) }}</span>

                            <template v-if="old.tradePrice != datas.newTradePrice">
                                --> {{datas.newTradePrice}}元
                                <span v-if="old.sellUnit">/{{ getLabel("sell_unit", old.sellUnit) }}</span>
                            </template>
                        </div>
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="负责营销职员：" prop="headId">

                        <div :class=" old.headId != datas.headId ? 'flow-status-color' : ''">
                            <span>{{old.headName}}</span>
                            <span v-if="old.headId != datas.headId"> --> {{datas.headName}}</span>
                        </div>

                    </el-form-item>
                </el-col>

            </el-row>
        </el-form>

    </div>

</template>

<script>
// 签约代理商信息变更
import {defineComponent, reactive, toRefs, watch} from 'vue'

export default defineComponent({
        name: 'changeTerminalDev',
        props: {
            detailData: {
                type: Object,
                default: {}
            }

        },
        setup(props) {
            var data = reactive({
                datas: {},
                old: {},
            })

            watch(
                () => props.detailData,
                (newval, oldval) => {
                    if (newval && newval.data) {
                        console.log(newval.data)
                        data.datas = newval.data
                        data.old = newval.data.old
                    }
                },
                { immediate: true, deep: true }
            )

            return {
                ...toRefs(data)
            }
        }
    })
</script>

<style scoped>

</style>
